<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户详情</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/layui/css/layui.css">
<style type="text/css">
.layui-form .layui-form-item .layui-form-label{
   padding:8px;
}
.layui-form .layui-form-item .layui-input-inline{
  margin-left: 27px;
  width: 400px;
}
.layui-form .area .layui-input-inline{
  margin-left: 27px;
  width: 180px;
}
.layui-form .layui-form-item .layui-input-block textarea{
	margin-left: 14px;
}
.layui-form .layui-form-item .submit-btn{
  margin-left: 40%;
}
#userHeader{
  width: 780px;
  height: 400px;
  transition:all 0.3s;
  display:block;
}
.show{
  display:block;
  visibility: visible;
}
.layui-form .layui-form-item .layui-upload-button{
  margin-left: 27px;
}
</style>
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">真实名称</label>
    <div class="layui-input-inline">
      <input type="text" name="realName" value="$!user.realName" disabled="disabled" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名称</label>
    <div class="layui-input-inline">
      <input type="text" name="userName" value="$!user.userName" disabled="disabled" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">用户名称不可重复</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户类型</label>
    <div class="layui-input-inline">
      <select name="type" required lay-verify="required">
        <option value=""></option>
        <option value="admin">管理员</option>
        <option value="user">普通用户</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机号码</label>
    <div class="layui-input-inline">
      <input type="tel" name="phone" value="$!user.phone" disabled="disabled" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户邮箱</label>
    <div class="layui-input-inline">
      <input type="text" name="email" value="$!user.email" disabled="disabled" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户爱好</label>
    <div class="layui-input-inline">
      <input type="checkbox" name="userlikes" title="阅读" checked>
      <input type="checkbox" name="userlikes" title="写作">
      <input type="checkbox" name="userlikes" title="发呆">
    </div>
    
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户性别</label>
    <div class="layui-input-inline">
      <input type="radio" name="sex" value="man" title="男" checked>
      <input type="radio" name="sex" value="femal" title="女" >
      <input type="radio" name="sex" value="unknow" title="未知">
    </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">用户生日</label>
      <div class="layui-input-inline">
        <input type="text" name="birthday" value="$!date.format('yyyy-MM-dd',$!user.birthday)" disabled="disabled" placeholder="yyyy-mm-dd" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this})">
      </div>
  </div>
  <div class="layui-form-item area">
    <label class="layui-form-label">用户地区</label>
    <div class="layui-input-inline">
      <input type="text" name="province" value="$!user.province" disabled="disabled" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
      <input type="text" name="city" value="$!user.city" disabled="disabled" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
      <input type="text" name="area" value="$!user.area" disabled="disabled" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item layui-form-text site-demo-upload">
    <label class="layui-form-label">用户头像</label>
	<div class="layui-form-item layui-form-text">
	  <img id="userHeader" src="$url.zimg()/$!user.avator">
    </div>
  </div>
  <input type="hidden" name="avator" value="">
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">个人描述</label>
    <div class="layui-input-block">
      <textarea name="remark" id="userDesc" placeholder="请输入内容" class="layui-textarea">$!user.remark</textarea>
    </div>
  </div>
</form>
</body>
<script type="text/javascript" src="$request.getContextPath()/resources/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/layui/layui.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/layui/lay/modules/element.js"></script>
<script type="text/javascript">
$(function(){
  //表单验证
  layui.use(['form', 'layedit', 'laydate'], function(){
	  var form = layui.form(),layer = layui.layer,layedit = layui.layedit,laydate = layui.laydate;
	  layedit.build('userDesc',{
        tool: [
          'strong' //加粗
          ,'italic' //斜体
          ,'underline' //下划线
          ,'|' //分割线
          ,'left' //左对齐
          ,'center' //居中对齐
          ,'right' //右对齐
        ]
      });
  });
});
</script>
</html>